<template>
    <h2 style="text-align: center;">
        房型列表
    </h2>
    <table class="table table-bordered">
        <tr class="form-inline">
            <td>房型名称</td>
            <td>
                <input type="text" v-model="form.hTname" class="form-control">
            </td>
        </tr>
        <tr class="form-inline">
            <td>房型面积</td>
                        <td>
                <input type="text" v-model="form.area" class="form-control">
            </td>
        </tr>
        <tr class="form-inline">
            <td>是否有窗</td>
                       <td>
                <input type="radio" v-model="form.issowindow"  value="true">有
                <input type="radio" v-model="form.issowindow"  value="false">无
            </td>
        </tr>
        <tr class="form-inline">
            <td>价格</td>
                        <td>
                <input type="text" v-model="form.hprice" class="form-control">
            </td>
        </tr>
        <tr class="form-inline">
            <td>入住人数</td>
                        <td>
                <select v-model="form.hnum" class="form-control">
                    <option v-for="item in 3" :key="item" :value="item">{{item}}</option>
                </select>
            </td>
        </tr>
        <tr class="form-inline">
            <td>状态</td>
                        <td>
                <input type="radio" v-model="form.hsdata"  value="true">启用
                <input type="radio" v-model="form.hsdata"  value="false">禁用
            </td>
        </tr>
        <tr>
            <td>图片</td>
            <td>
                <img :src="form.pic" style="width: 100px;height: 100px;">
                <input type="file" @change="upload" >
            </td>
        </tr>
        <tr class="form-inline">
            <td>添加时间</td>
                        <td>
                <input type="date" v-model="form.createtime" class="form-control">
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center;">
                <button class="btn btn-warning" @click="add" >添加</button>
            </td>
        </tr>
    </table>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import "bootstrap/dist/css/bootstrap.min.css"

const form = reactive({
  "hTname": "",
  "pic": "",
  "area": "",
  "issowindow": true,
  "hprice": "",
  "hnum": "",
  "hsdata": true,
  "createtime": "2024-09-26T03:23:08.729Z",
  "delete": true
})

//上传
const upload = (e: any) => {
    //上传的文件信息
    let file = e.target.files[0];
    const formdata = new FormData();
    formdata.append("file", file);

    //格式判定大小判定
    let fileExt = ["image/jpeg", "image/png", "image/gif"]
    if (fileExt.indexOf(file.type) == -1) {
        alert("文件必须是图片[jpg.png.gif]");
        return;
    }
    // 大小判定
    if (file.size > 2 * 1024 * 1024) {
        alert("文件不大于2M");
        return;
    }
        axios.post("https://localhost:7235/api/House/Uploadpic", formdata).then(res => {
        form.pic = res.data;
    })
}

const add = () => {
    if (!form.hTname) {
        alert("房型名称不能为空");
        return;
    }
    if (!form.area) {
        alert("房型面积不能为空");
        return;
    }
    axios.post("https://localhost:7235/api/House/Add", form).then(res => {
        if (res.data > 0) {
            alert("添加成功");
        }
        else {
            alert("添加失败");
            return;
        }
    })
}





</script>